<template>
  <div class="conversation-chats">
    <!-- 好友信息 -->
    <div class="chats-title">
      <!-- 头像 -->
      <img class="avatar" v-if="currentFriend.Avatar" :src="currentFriend.Avatar" alt="头像" />
      <!-- 昵称 -->
      <span class="nick-name ellipsis" v-text="currentFriend.NickName || currentFriend.FriendNick"></span>
      <div
        class="members-number"
        v-if="currentFriend.MemberList"
        v-text="'('+currentFriend.MemberList.length+')'"
      ></div>
      <!-- 性别 -->
      <div v-if="currentFriend.Gender" class="gender" v-text="currentFriend.Gender"></div>
      <!-- 地址 -->
      <div class="address" v-if="currentFriend.Province" v-text="currentFriend.Province"></div>
      <div class="address" v-if="currentFriend.City" v-text="currentFriend.City"></div>
    </div>

    <!-- 输入/输出 -->
    <div class="chats-content">
      <show-chats class="show-chats"></show-chats>
      <div class="input-window">
        <tools-bar></tools-bar>
        <answer-window></answer-window>
      </div>
    </div>

    <!-- 提示 -->
    <div class="chats-bottom">按ctrl + enter 换行</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ToolsBar from './communicate/ToolsBar'
import AnswerWindow from './communicate/AnswerWindow'
import ShowChats from './communicate/ShowChats'

export default {
  data() {
    return {
    }
  },
  components: {
    ToolsBar,
    AnswerWindow,
    ShowChats,
  },
  computed: {
    ...mapGetters({
      currentFriends: 'conversation/currentFriends',
      currentWeChatId: 'conversation/currentWeChatId'
    }),
    currentFriend() {
      return this.currentFriends[this.currentWeChatId] || {}
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.conversation-chats {
  flex: 1 1 auto;
  margin-right: 5px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  .chats-title,
  .chats-bottom {
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: white;
    // background-color: #545c64;
    background-color: $bg-color-nav-title-2;
  }

  .chats-title {
    justify-content: start;
    .avatar {
      width: 30px;
      height: 30px;
      margin-left: 5px;
    }
    .nick-name,
    .gender,
    .address,
    .members-number {
      font-size: 14px;
      margin-left: 10px;
      color: white;
    }
    .nick-name {
      max-width: 250px;
    }
  }

  .chats-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background-color: $bg-color-content-base;

    .input-window {
      height: 35%;
      background: white;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>

